<template>
  <!-- <div class="app-container"> -->
    <div class="mapDiv" v-loading="loading">
      <!--地图-->
      <IndexMap v-if="completeRefreshData==true"
                   @getMap="getMap"
      ></IndexMap>
      <!--工具条控件-->
      <ControlToolBar v-if="completeRefreshData==true"
                      :map="map" :pageType="pageType"
                      :influenceFieldGeomList="influenceFieldGeomList"
                      @getClickLonLat="getClickLonLat"
                      @showImgcreate="showImgcreate"
                      @seismicInfluenceSelect="seismicInfluenceSelect"
      ></ControlToolBar>
      <!--超图图层显示-->
      <SuperMapLayer v-if="completeMapBool==true"
                     :map="map" :layerDataTypeList="layerDataTypeList"
                     :taskGeom="form.coordinateRange"
                     :resetClearAllBool="resetClearAllBool"
                     :clickLonLat="clickLonLat"
      ></SuperMapLayer>
      <drawingView :open="plotDialog" :formParams="formParams" :title="title" @closeDialog="closeDialog" />
    </div>
  <!-- </div> -->
</template>

<script setup>
//地图
import IndexMap from '@/map/building/confirm/indexMap.vue';
import ControlToolBar from '@/map/components/controlToolBar/map.vue';
import SuperMapLayer from '@/map/components/superMapLayer/index.vue';
import { getInfluencefliedById } from '@/api/basicDataManage/earthquakeImpactField.js'
import drawingView from '@/map/components/drawingView/index.vue';

const { proxy } = getCurrentInstance();
const router = useRouter();
const props = defineProps(['dataType','form']);
const loading = ref(false);
const pageType = ref("建筑物确定评估结果页面");
const title = ref('')
const plotDialog = ref(false)

function showImgcreate() {
  plotDialog.value = true
  let type = props.dataType
  formParams.value.taskId = props.form.id
  formParams.value.dataType = '0'
  formParams.value.assessType = '0'
  formParams.value.seismicInputMode = props.form.seismicInputMode
  formParams.value.condition = props.form.condition
  if(type.indexOf("personCasualtiesEd")!=-1) {// 人员伤亡-确定评估
    title.value = '确定评估-人员伤亡评估'
    formParams.value.assessObj = '1'
    formParams.value.casualties = props.form.casualties
    formParams.value.times = props.form.time
  }else if(type=="economicLossesEd"){// 经济损失-确定评估
    title.value = '确定评估-经济损失评估'
    formParams.value.assessObj = '2'
  }else if(type=="seismicEd"){// 抗震能力-确定评估
    title.value = '确定评估-结构破坏评估'
    formParams.value.assessObj = '0'
    formParams.value.destroy = props.form.damageDegree
  }
}

const closeDialog = (bool)=>{
  plotDialog.value = false;
}

const data = reactive({
  //图层数据类别code和url列表
  layerDataTypeList:[
    {
      //建筑物确定评估--抗震能力-确定评估
      level2DataType:"buildingConfirm",//数据类别二级code
      level3DataType:"seismicEd",//数据类别三级code
      versionCode:null,//查询临时图层过滤条件
      show:false,//是否显示
      isYw:true,//是否为业务系统数据，true业务系统，false基础数据系统
      tifFileName:null,//tif文件名称
    },
    /*{
      //建筑物确定评估--人员伤亡-确定评估
      level2DataType:"buildingConfirm",//数据类别二级code
      level3DataType:"personCasualtiesEd",//数据类别三级code
      versionCode:null,//查询临时图层过滤条件
      show:false,//是否显示
      isYw:true,//是否为业务系统数据，true业务系统，false基础数据系统
      tifFileName:null,//tif文件名称
    },*/
    {
      //建筑物确定评估--人员伤亡-确定评估-白天死亡
      level2DataType:"buildingConfirm",//数据类别二级code
      level3DataType:"personCasualtiesEd_day_death",//数据类别三级code
      versionCode:null,//查询临时图层过滤条件
      show:false,//是否显示
      isYw:true,//是否为业务系统数据，true业务系统，false基础数据系统
      tifFileName:null,//tif文件名称
    },
    {
      //建筑物确定评估--人员伤亡-确定评估-白天重伤
      level2DataType:"buildingConfirm",//数据类别二级code
      level3DataType:"personCasualtiesEd_day_injure",//数据类别三级code
      versionCode:null,//查询临时图层过滤条件
      show:false,//是否显示
      isYw:true,//是否为业务系统数据，true业务系统，false基础数据系统
      tifFileName:null,//tif文件名称
    },
    {
      //建筑物确定评估--人员伤亡-确定评估-夜间死亡
      level2DataType:"buildingConfirm",//数据类别二级code
      level3DataType:"personCasualtiesEd_night_death",//数据类别三级code
      versionCode:null,//查询临时图层过滤条件
      show:false,//是否显示
      isYw:true,//是否为业务系统数据，true业务系统，false基础数据系统
      tifFileName:null,//tif文件名称
    },
    {
      //建筑物确定评估--人员伤亡-确定评估-夜间重伤
      level2DataType:"buildingConfirm",//数据类别二级code
      level3DataType:"personCasualtiesEd_night_injure",//数据类别三级code
      versionCode:null,//查询临时图层过滤条件
      show:false,//是否显示
      isYw:true,//是否为业务系统数据，true业务系统，false基础数据系统
      tifFileName:null,//tif文件名称
    },
    {
      //建筑物确定评估--经济损失-确定评估
      level2DataType:"buildingConfirm",//数据类别二级code
      level3DataType:"economicLossesEd",//数据类别三级code
      versionCode:null,//查询临时图层过滤条件
      show:false,//是否显示
      isYw:true,//是否为业务系统数据，true业务系统，false基础数据系统
      tifFileName:null,//tif文件名称
    },
  ],
  formParams:{}
})
const { layerDataTypeList,formParams } = toRefs(data)

/*地图传参start*/
const completeRefreshData = ref(false);//防止刷新后地图不显示
const completeMapBool = ref(false);//是否完成加载地图
//地图对象
const map = ref(null);
const getMap = (obj)=>{
  map.value = obj;
  completeMapBool.value = true;
}
const resetClearAllBool = ref(false);//是否清空全部超图图层
//点击地图经纬度
const clickLonLat = ref([]);
//传递点击地图经纬度
const getClickLonLat = (lonlat) =>{
  clickLonLat.value = lonlat;
}
/*地图传参end*/

//根据类型显示超图图层
function showLayerByDataType(type,form){
  if(type){
    let sqlFilter = "";
    if(form.assessCode){
      sqlFilter += "assess_id='"+form.id+"'";
    }
    let seismicInputMode = form.seismicInputMode;
    if(form.condition){
      if(type.indexOf("personCasualtiesEd")!=-1) {//人员伤亡-确定评估
        if(seismicInputMode=="0"){//烈度
          let intensity = form.condition;
          if(intensity=="ld1"){
            intensity = "Ⅵ";
          }else if(intensity=="ld2"){
            intensity = "Ⅶ";
          }else if(intensity=="ld3"){
            intensity = "Ⅷ";
          }else if(intensity=="ld4"){
            intensity = "Ⅸ";
          }else if(intensity=="ld5"){
            intensity = "Ⅹ";
          }
          if(sqlFilter){
            sqlFilter += " and ";
          }
          sqlFilter += "intensity='"+intensity+"'";
        }else if(seismicInputMode=="1"){//超越概率
          let condition = form.condition;
          if(sqlFilter){
            sqlFilter += " and ";
          }
          sqlFilter += "condition='"+condition+"'";
        }else if(seismicInputMode=="2"){//地震影响场
          let version = form.condition;
          if(sqlFilter){
            sqlFilter += " and ";
          }
          sqlFilter += "version='"+version+"'";
        }
      }else if(type=="economicLossesEd"){//经济损失-确定评估
        if(seismicInputMode=="2"){//地震影响场
          let version = form.condition;
          if(sqlFilter){
            sqlFilter += " and ";
          }
          sqlFilter += "condition='"+version+"'";
        }else {
          if(sqlFilter){
            sqlFilter += " and ";
          }
          sqlFilter += "condition='"+form.condition+"'";
        }
      }else if(type=="seismicEd"){
        if(seismicInputMode=="2"){//地震影响场
          let version = form.condition;
          if(sqlFilter){
            sqlFilter += " and ";
          }
          sqlFilter += "version='"+version+"'";
        }else {
          if(sqlFilter){
            sqlFilter += " and ";
          }
          sqlFilter += "condition='"+form.condition+"'";
        }
      }else{
        if(sqlFilter){
          sqlFilter += " and ";
        }
        sqlFilter += "condition='"+form.condition+"'";
      }
    }
    if(type=="seismicEd"){//抗震能力-确定评估
      if(form.damageDegree){
        if(sqlFilter){
          sqlFilter += " and ";
        }
        sqlFilter += "damage_degree='"+form.damageDegree+"'";
      }
    }/*else if(type=="personCasualtiesEd"){//人员伤亡-确定评估
      if(form.casualties){
        if(sqlFilter){
          sqlFilter += " and ";
        }
        sqlFilter += "casualties='"+form.casualties+"'";
      }
      if(form.time){
        if(sqlFilter){
          sqlFilter += " and ";
        }
        sqlFilter += "time='"+form.time+"'";
      }
    }else if(type=="economicLossesEd"){//经济损失-确定评估
      //
    }*/
    if(sqlFilter){
      //
    }else{
      sqlFilter = "全部";
    }
    //test
    // sqlFilter = "全部";
    //设置图层数据版本
    setLayerVersion(type,sqlFilter);
  }
}

//设置图层数据
function setLayerVersion(type,sqlFilter){
  let list = layerDataTypeList.value;
  for(let i=0;i<list.length;i++){
    if(list[i].level3DataType==type){
      list[i].versionCode = sqlFilter;
      list[i].show = true;
      break;
    }
  }
  console.log(list);
  layerDataTypeList.value = list;
}

//移除图层数据
function removeLayerVersion(type){
  let list = layerDataTypeList.value;
  for(let i=0;i<list.length;i++){
    if(list[i].level3DataType==type){
      list[i].show = false;
      break;
    }
  }
  console.log(list);
  layerDataTypeList.value = list;
}
//选择地震影响场
const seismicInfluenceSelect = (val)=>{
  if(val){
    getInfluenceFieldGeom()
  }else{
    influenceFieldGeomList.value = []
  }
}
const influenceFieldGeomList = ref([])
function getInfluenceFieldGeom() {
  getInfluencefliedById({ versionCode: props.form.influenceFieldVersion }).then(res => {
    influenceFieldGeomList.value = res.data
  }).catch()
}
//获取查询参数
const getFormParams = watch(() => props.form, value => {// watch函数监听props.form
  if(value.assessCode){
    let dataType = props.dataType;
    removeLayerVersion(dataType)
    if(props.form.seismicInputMode == '2') {
      pageType.value = "建筑物确定评估结果页面"
      getInfluenceFieldGeom()
    }else{
      pageType.value = ""
      influenceFieldGeomList.value = []
    }
    //根据类型显示超图图层
    showLayerByDataType(dataType,value);
  }
},{immediate:true});

onMounted(() => {
  completeRefreshData.value = true;
})
</script>

<style scoped lang="scss">
// .mapDiv {
//   position:absolute;top:0px;left:0px;width:100%;height:100%;
// }

/*设置选择数据面板*/
.new-settingDiv {
  position:absolute;top:18px;left:110px;width:400px;padding:20px;padding-top: 10px;
  background:rgba(0,27,67,0.7);border-radius:4px;color:white;
}
.new-settingDiv-div1{
  padding-bottom: 10px;
  border-bottom: 1px dashed white;
}
.new-settingDiv .new-p{
  margin-bottom: 10px;
  font-size:14px;
}
.new-settingDiv-div3{
  text-align: center;
}
:deep(.new-settingDiv .el-radio){
  color:white;
}
:deep(.new-settingDiv .el-checkbox){
  color:white;
}
:deep(.new-settingDiv .new-p .el-button){
  position:absolute;right:20px;
}
:deep(.new-settingDiv .el-select){
  width:208px;
}
.new-settingDiv-span {
  float: right;
  line-height: 32px;
  cursor:pointer;
}
.new-settingDiv-span:hover {
  cursor:pointer;
}

/*带三角弹窗*/
.new-popover {
  position: absolute;
  top:0px;
  left:0px;
  padding:10px;
  background: rgba(0,27,67,0.8);
  color:white;
  z-index:100;
}
.new-triangle {
  position: absolute;
  top: 20px;
  left: -19px;
  overflow: hidden;
  width: 0;
  height: 0;
  border-width: 10px;
  border-style: dashed solid dashed dashed;
  border-color:transparent rgba(0,27,67,0.8) transparent transparent;
}

.new-pattenAnalysisDiv {
  position: absolute;top:246px;left:105px;font-size: 14px;
}

.new-pattenAnalysisDiv-button {
  float: left;
  width: 80px;
  text-align: center;
  padding: 5px;
  cursor:pointer;
}
/*规律分析按钮div*/
.showPattenAnalysisDiv img {
  width:25px;
  border:1px dashed white;
}
.showPattenAnalysisDiv-div1 {
  display: inline-block;width:160px;border-bottom: 1px dashed white;padding-bottom: 10px;
}

.new-div-selected {
  background: rgba(16,124,229,0.5);
  border: 1px solid #707070;
}

.areaDialog {
  text-align: center;
  .close {
    text-align: right;
    .el-icon {
      color: #606266;
      padding: 20px 0;
      margin-right: 10px;
      right: 0px;
      font-size: 22px;
    }
  }
  width: 320px;
  position: absolute;
  top: 246px;
  left: 288px;
  background: rgba($color: #fff, $alpha: 0.9);
}

.resultShowButton {
  position:absolute;
  top:20px;
  right:20px;
  width:50px;
  height:50px;
}

</style>